<template>
  <div>
    <tab :line-width="2"
         custom-bar-width="50px"
         bar-active-color="#4285f6"
         active-color="#4285f6">

      <tab-item @on-item-click="onItemClick"
                :selected='this.index ===0'>全部</tab-item>
      <tab-item @on-item-click="onItemClick"
                :selected='this.index ===1'>待付款</tab-item>
      <tab-item @on-item-click="onItemClick"
                :selected='this.index ===2'>已付款</tab-item>
      <tab-item @on-item-click="onItemClick"
                :selected='this.index ===3'>已取消</tab-item>
    </tab>
    <div class="height"
         ref="height">
      <div class="wrapper"
           ref="wrapper">
        <ul class=" items content">
          <li class="item"
              v-for="(item,index) in orderList"
              :key="index"
              @click="$router.push({path:'/orderdet',query:{orderId:item.id}})">
            <div class="tit flex start bor_b">
              <img src="../../assets/image/shop.png"
                   width="16">
              <p>{{item.hotelName}}</p>
              <img src="../../assets/image/arrow.png"
                   width="6">
            </div>
            <div class="con">
              <p class="flex between"> <span>{{item.bookedTime}}</span> <span>{{item.status | orderStuts}}</span></p>
              <div class="flex between info pd20">
                <img :src="item.roomFile | imgUrl"
                     width="60"
                     height="60">
                <div class="room_ifo">
                  <p class="fz28 flex between"><span>{{item.roomCategory}}</span> <span class="fz20">合计{{item.days}}晚</span></p>
                  <p class="col_999">{{item.startDate}}~{{item.endDate}} </p>
                </div>
              </div>
              <p class="t-r pd20"> 合计：￥{{item.orderAmount}}</p>
            </div>
          </li>

        </ul>

      </div>
    </div>
    <div class="nothing"
         v-show="nothingShow">
      <img src="../../assets/image/nothing.png">
      <p> 暂无数据</p>
    </div>
  </div>

</template>
<script>
import BScroll from 'better-scroll'
import { Tab, TabItem } from 'vux'
import { mapGetters } from 'vuex'
import * as API from '../../api'
export default {
  components: {
    Tab,
    TabItem,
    BScroll

  },
  data () {
    return {
      orderList: [],
      page: 1,
      index: 0,
      nothingShow: true
    }
  },
  created () {

    this.index = this.$route.query.orderType * 1
    this.onload(this.index)
  },
  // mounted () {
  //   this.$refs.height.style.height = document.documentElement.clientHeight - 40 + 'px'
  //   this.scrollFn()
  // },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    onItemClick (index) {
      this.index = index
      console.log('on item click:', index)
      this.onload(this.index)
    },
    // scrollFn () {
    //   this.$nextTick(() => {
    //     if (!this.scroll) {
    //       this.scroll = new BScroll(this.$refs.wrapper, {
    //         click: true,
    //         scrollY: true,
    //         probeType: 3
    //       })
    //     } else {
    //       this.scroll.refresh()
    //     }
    //     this.scroll.on('touchEnd', (pos) => {
    //       if (pos.y > 50) {
    //         this.onload(this.index)
    //       }
    //       if (this.scroll.maxScrollY > pos.y + 10) {
    //         console.log('下拉')
    //         this.page++
    //         this.onload(this.index, this.page)
    //         console.log(this.page)

    //         this.scroll.refresh()
    //       }
    //     })
    //   })
    // },
    onload (index) {
      this.nothingShow = true
      this.$http.get(API.order, {
        params: {
          openId: this.userInfo.openId,
          orderStatus: index
        }
      }).then(
        res => {
          console.log(res.data)
          this.orderList = res.data
          if (res.data.length) { this.nothingShow = false }
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    }
  }
}

</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";

.height {
  position: relative;
}
.content {
  padding-bottom: 50px;
}
.items {
  margin-top: 20px;
  .item {
    @extend .bg_fff;
    .tit {
      padding-left: 20px;
      p {
        padding: 10px 20px;
        font-size: 28px;
      }
    }
    .con {
      p {
        padding: 10px 20px;
      }
      .info {
        background-color: #f7f7f7;
        .room_ifo {
          width: 80%;
        }
      }
    }
  }
}
</style>
